<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>鼠标跟随效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .wp {
            width: 300px;
            height: 200px;
            background-color: #eee;
            margin: 20px auto;
            position: relative;
        }
        
        .tip {
            background-color: red;
            border-radius: 5px;
            padding: 10px;
            position: absolute;
            display: none;
        }
    </style>
</head>

<body>

    <div class="wp" data-info="测试一下，我是跟随文字"></div>

    <hr />

    <div class="wp" data-info="哈哈哈等会儿"></div>

    <div class="tip"></div>

    <script src="../jQuery库/jquery-3.1.0.js"></script>

    <script>
        $(".wp").on("mousemove", function(e) {
            let $this = $(this);
            let left = e.pageX;
            let top = e.pageY;
            let text = $this.attr("data-info");

            $(".tip").css({
                top: top + 20,
                left: left + 20
            }).html(text).show()
        }).on("mouseleave", function() {
            $(".tip").hide();
        })
    </script>



</body>

</html>